<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>在线聊天室</title>
  <script src="http://47.104.209.44/base/js/jquery-1.10.1.min.js"></script>
  <style>
    #chatroom{
      width:280px;
      height:420px;
      border:1px solid darkorchid;
      border-radius: 10px;
      padding:10px;
      margin:10px 0;
      box-sizing: border-box;
      overflow: auto;
      font-size: 14px;
      color:deepskyblue;
    }
  </style>
</head>
<body>
  <%- include common %>
  <%- include('head', {title:"聊天室"} )%>
    <div>
      <h2>WH2110  小伙伴在线聊天室 </h2>
      <div id="chatroom">

      </div>
      <div>
        <input type="text" placeholder="请输入聊天内容" id="word" >
        <button id="sendbtn">发送内容</button>
      </div>
    </div>
    <%-  include("foot")  %>
    <script>

    // # 客户端 socket 
    // # 创建 客户端的socket
    // # 链接到指定的服务器端socket
    // # 发送消息到服务端socket
    // # 接收来自服务器端的socket
    // # 监听 服务器的关闭   close 
    // # 监听 服务器的异常   error


    //  创建 客户端的socket

    window.onload = function(){

      //  链接到指定的服务器端socket
      var socket = new WebSocket("ws://192.168.50.104:4800")

      // 第一次链接服务器端socket
      socket.onopen = function(){
        var nickname = window.prompt("请输入你的昵称")  || '匿名'
        console.log(nickname)
        console.log("链接成功第一次")
        // 发送消息到服务端socket
        socket.send("我的名字是 : " + nickname)
      }

      //  接收来自服务器端的socket
      socket.onmessage = function(e){
        console.log(e)
        $("#chatroom").append(`<p> ${e.data} </p>`)
      }
      
       //  监听 服务器的关闭   close 
      socket.onclose= function(){
        console.log("服务器端socket 已经关闭了")
      }
      //  监听 服务器的异常   error
      socket.onerror = function(error){
        console.log("服务器端socket 出现错误" + error)
      }

      function sendMsg(){
        // 发送消息到服务端socket
        socket.send($("#word").val())
        $("#word").val('')
      }

      $("#sendbtn").on('click',sendMsg)

      document.onkeypress = function(e){
         if(e.keyCode==13){
          sendMsg()
         }
      }
    }
    </script>
</body>
</html>